//资料填写
import { View, Button, Input, Form, Picker, Image } from "@tarojs/components";
import "./index.scss";
import React, { useState, useEffect } from "react";
import Taro, { getStorageSync } from "@tarojs/taro";
import store from "../../store";
import http from "../../utils/http";

let Datum = () => {
  let [sel, setSel] = useState([]);
  let [selval, setSelval] = useState("");
  let [locval, setLocval] = useState("");
  let [community, setCommunity] = useState([]);
  let [comVal, setComVal] = useState("");
  const [userImg, setUserImg] = useState("");
  useEffect(() => {
    http({
      url: "/merchant/queryStoreTypeController"
    }).then(res => {
      let arr = res.data.data.map(v => v.styName);
      setSel(arr);
    });
    http({
      url: "/user/groupCommunityQueryList"
    }).then(res => {
      let data = res.data.data.map(v => v.communityName);
      setCommunity(data);
    });
    if (Taro.getStorageSync("userImg")) {
      setUserImg(Taro.getStorageSync("userImg"));
    }
  }, []);
  let formSubmit = function(e) {
    let arr = e.mpEvent.detail.value;
    store.s_wh.setMeans(arr);
    let data = [];
    let state = false;
    for (let key in arr) {
      data.push({ value: arr[key] });
    }
    state = data.slice(0, 7).every(i => {
      return i.value != "";
    });
    if (!state) {
      Taro.showToast({
        title: "您有必填项未填写!",
        icon: "error",
        duration: 2000
      });
    } else {
      //这里判断邀请码是否错误
      store.s_wh.setTextMeans(data);
      Taro.navigateTo({
        url: "./photo"
      });
    }
  };
  return (
    <View className="datum">
      <View className="tit">
        <View>资料填写</View>
        <View>
          <Image src={userImg}></Image>
        </View>
      </View>
      <Form onSubmit={formSubmit}>
        <View className="sel">
          <Picker
            mode="selector"
            range={sel}
            name="styName"
            value={selval}
            onChange={e => {
              setSelval(sel[e.detail.value]);
            }}
            className="picker"
          >
            <Input placeholder="门店类型" value={selval}></Input>
          </Picker>
          <Input placeholder="请输入入驻门店名称" name="stName"></Input>
        </View>
        <Picker
          mode="selector"
          range={community}
          name="communityRegion"
          value={comVal}
          onChange={e => {
            setComVal(community[e.detail.value]);
          }}
          className="picker"
        >
          <Input placeholder="请选择所属拼团点" value={comVal}></Input>
        </Picker>
        <Input placeholder="请输入统一社会信用代码" name="stCode"></Input>
        <Input
          placeholder="请输入经营者姓名或公司法人名称"
          name="memberName"
        ></Input>
        <Input placeholder="请输入门店经营者身份证号" name="cardId"></Input>
        <Input
          placeholder="
          请输入门店地址"
          value={locval}
          name="stAdd"
          onClick={() => {
            Taro.getLocation({
              //获取当前位置
              type: "gcj02", //返回可以用于 Taro.openLocation的经纬度
              success: function(res) {
                const latitude = res.latitude;
                const longitude = res.longitude;
                Taro.openLocation({
                  //打开地图
                  latitude,
                  longitude,
                  scale: 18,
                  success: () => {
                    Taro.chooseLocation({
                      //确定选址
                      success(res) {
                        setLocval(res.name);
                      }
                    });
                  }
                });
              }
            });
          }}
        ></Input>
        <Input placeholder="请输入邀请码，选填" name="invite"></Input>
        <Button className="next" form-type="submit">
          下一步
        </Button>
      </Form>
    </View>
  );
};
export default Datum;
